<template>
  <div class="indexThree">
    <div class="content">
      <!-- <img
        class="title-img"
        src="https://img10.360buyimg.com/babel/jfs/t1/154825/27/19542/32051/603772f1E8d846eb2/2d75bb25cc4087a5.jpg.webp"
      /> -->
      <div class="good-items">
        <div class="good-title">
          <h2>
            <i class="iconfont icon-huo mini"></i>
            <i class="iconfont icon-huo middle"></i>
            <i class="iconfont icon-huo "></i> 每月精选秒杀
            <i class="iconfont icon-huo "></i>
            <i class="iconfont icon-huo middle"></i>
            <i class="iconfont icon-huo mini"></i>
            <span
              class="more"
              @click="$router.push({path: '/giftbag',})">更多<van-icon name="arrow"/></span>
          </h2>
        </div>
        <van-skeleton title :row="5" v-if="items.length == 0" />
        <div id="indexThree-scroll" class="indexThree-scroll" v-else>
          <div id="indexThree-begin" class="good-box">
            <div class="item" v-for="value in items" :key="value.F_ProductId">
              <div
                class="good-card"
                @click="
                  $router.push({
                    path: '/product',
                    query: { id: value.F_ProductId, parents_id: username },
                  })
                "
              >
                <img
                  class="product-img lazy-img"
                  :src="'http://higuang365.com/' + value.F_pic_url"
                />
                <div class="good-desc">
                  <div class="title">{{ value.F_Name }}</div>
                  <span class="price">¥ {{ value.F_BdPrice }}</span>
                  <br />
                  <div class="price-share">
                    <span class="estimate">零售价: {{ value.F_Price }}</span>
                    <span
                      class="share"
                      @click.stop="
                        addGoodsCart(value.F_yuliu3, value.F_ProductId)
                      "
                    >
                      <i class="iconfont icon-MBEfenggeduosetubiao-gouwuche"
                    /></span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div id="indexThree-end" class="good-box"></div>
        </div>
      </div>
    </div>
    <van-overlay :show="showherf" z-index="10001">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" color="#fff" size="3rem" vertical>前往商城</van-loading>
      </div>
    </van-overlay>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "@vue/reactivity";
import { GetTagGoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
import { ScrollLeft } from "@/lib/expand";
import { defineComponent, nextTick } from "vue";
export default defineComponent({
  setup() {
    const data = reactive({
      items: [],
      showherf: false,
      username: getCookie("S[MEMBER]"),
    });
    const onLoad = async () => {
      const res = await GetTagGoodsList({
        pageNum: 1,
        pageSize: 10,
        tag_id: "37",
        strlv: getCookie("MLV"),
      });

      data.items = res[1];
      //Dom更新后触发滚动
      nextTick(() => {
        const listScroll = new ScrollLeft(
          "indexThree-scroll",
          "indexThree-begin",
          "indexThree-end"
        );
        listScroll.start(15);
      });
    };
    const showShare = (
      value: { F_pic_url: string; F_ProductId: string; F_Name: string },
      F_Question: string
    ) => {
      let purl = "http://higuang365.com/" + value.F_pic_url; //可以是本地图片
      var surl =
        "http://www.higuang365.com/wap/product-" +
        value.F_ProductId +
        ".html" +
        (F_Question ? "?parents_id=" + F_Question : ""); //分享的链接
      let msg = {
        title: "嗨逛全球", //标题
        content: value.F_Name, //内容
        thumbs: [purl], //缩略图
        href: surl,
        extra: {
          scene: "WXSceneChooseByUser",
        },
      };
      if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
        window.location.href = `higuang|shareGood|${msg.title}|${msg.content}|${purl}|${surl}`;
      } else {
        window.location.href =
          "http://www.higuang365.com/wap/product-" +
          value.F_ProductId +
          ".html" +
          (F_Question ? "?parents_id=" + F_Question : "");
      }
    };
    const loadimg = (event: any) => {
      event.target.dataset.lazy = "loaded";
    };

    onLoad();
    return { ...toRefs(data), loadimg, showShare, addGoodsCart };
  },
});
</script>
<style lang="scss" scoped>
.indexThree {
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2rem;
  }
}

.content {
  display: flex;
  align-items: center;
  .title-img {
    width: 12rem;
    border-radius: 1rem 0 0 1rem;
    margin-right: 2px;
  }
}
.good-items {
  width: 100%;
}
.good-title {
  // color: #000;
  // font-size: 1.6rem;
  // font-weight: bold;
  // position: relative;
  // padding: 1rem 0;
  // letter-spacing: 3px;
  // background: url("")
  //   no-repeat;
  // background-size: cover;
  // height: 1.7rem;
  // line-height: 1.7rem;
  // .more {
  //   font-size: 1rem;
  //   position: absolute;
  //   right: 0;
  //   font-weight: 500;
  //   color: #f15e5e;
  //   letter-spacing: 0px;
  //   i {
  //     font-size: 1rem;
  //   }
  // }
  // i {
  //   color: red;
  //   font-size: 1.6rem;
  //   font-weight: 500;
  // }
  h2 {
    font-size: 1.8rem;
    padding: 0.5rem;
    margin: 0;
    border-bottom: 2px solid #f7f7f7;
    position: relative;
    text-align: center;
    margin-bottom: 1rem;
    i {
      color: red;
    }
    .icon-huo {
      font-size: 2rem;
    }
    .mini {
      font-size: 1.4rem;
    }
    .middle {
      font-size: 1.7rem;
    }
    .more {
      font-size: 1rem;
      position: absolute;
      top: 1rem;
      right: 0;
      font-weight: 500;
      color: #f15e5e;
    }
  }
}
.indexThree-scroll {
  overflow: auto;
  white-space: nowrap;
}
.good-box {
  display: inline-flex;
  overflow: auto;

  .item {
    margin: 0.5rem;
    width: 10rem;
    min-width: 10rem;
    font-size: 1rem;
    position: relative;
    // &::after {
    //   content: "热卖";
    //   display: block;
    //   position: absolute;
    //   left: 0;
    //   z-index: 100;
    //   top: 8.3rem;
    //   background: #ff5c00;
    //   border-radius: 0 1rem 0 3px;
    //   color: #fff;
    //   letter-spacing: 1px;
    //   padding: 1px 0.6rem;
    // }
  }
  .good-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .product-img {
    display: block;
    width: 100%;
    height: 10rem;
    margin: 0 auto;
  }
  .good-desc {
    text-align: left;
    font-size: 1.2rem;
    padding-top: 1rem;
    position: relative;
    text-align: center;
    .county {
      display: flex;
      .county-icon {
        width: 2rem;
        height: 100%;
      }
      .county-title {
        color: #999;
        margin-left: 0.5rem;
      }
    }

    .title {
      height: 1.6rem;
      line-height: 1.6rem;
      color: #222333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .price {
      font-size: 1.4rem;
      margin-top: 1rem;
      color: #fd5633;
      font-weight: bold;
    }
    .price-share {
      justify-content: space-around;
      display: flex;
    }
    .share {
      color: #3c8a58;
    }
    .estimate {
      color: #a5a5a5;
      font-size: 1rem;
      text-decoration: line-through;
    }
  }
}
</style>
